<template>
    <div class="notice">
        <div class="list">
            <b-row class="item" v-for="(item,index) in items" :key="index" @click="toDetail(item)">
                <b-col xl="10" lg="10" md="10" sm="10">
                    <div class="title">{{item.title}}</div>
                </b-col>
                <b-col xl="2" lg="2" md="2" sm="2">
                    <div class="time">{{item.issueDate | filterDate}}</div>
                </b-col>
            </b-row>
        </div>
        <b-pagination align="center" v-model="currentPage" :total-rows="total" :per-page="perPage"></b-pagination>
    </div>
</template>

<script>
import { GetLists } from '@/api'
import { filterLocaleType, fmtDate } from '@/utils'
export default {
    name: 'notice',
  	data () {
		return {
			lanType: 2,
            items: [],
            total: 0,
            perPage: 10,
            currentPage: 1,
		}
    },
    filters:{
        filterDate(date){
            return fmtDate(date)
        }
    },
    mounted(){
		this.lanType = filterLocaleType(this.$i18n.locale)
		this.fetchData()
    },
    watch:{
		'$i18n.locale'(n, o) {
			this.lanType = filterLocaleType(n)
			this.fetchData()
        },
        currentPage(n){
            this.currentPage = n
            this.fetchData()
        }
	},
    methods:{
		fetchData(){
			GetLists({
				categoryId: 5,
				lanType: this.lanType,
				page:this.currentPage,
				size:this.perPage
			}).then((res)=>{
                this.items = res.dataList
                this.total = res.totalElements
			})
        },
		toDetail(item){
            if(item.link){
                window.open(item.link)
            }else{
                this.$router.push({
                    path: '/detail',
                    query: {
                        id: item.id,
                        tab: 3
                    }
                })
            }
		}
	}
}
</script>

<style lang="scss" scoped>
.notice{
    padding: 40px 10px 0 10px;
    .list{
        min-height: 200px;
    }
    .item{
        color:#999;
        margin-bottom: 40px;
        cursor: pointer;
        .title{
            position: relative;
            text-align: left;
            padding-left: 30px;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &:before{
                content: "";
                width: 18px;
                height: 14px;
                background: url(../../images/notice_ico.png) no-repeat 0 0;
                background-size: 100% 100%;
                position: absolute;
                left: 0;
                top: 5px;
            }
        }
        .time{
            text-align: right;
            position: relative;
            &:before{
                content: "";
                width: 18px;
                height: 18px;
                background: url(../../images/notice_time.png) no-repeat 0 0;
                background-size: 100% 100%;
                position: absolute;
                right: 105px;
                top: 50%;
                margin-top: -9px;
            }
        }
    }
}
</style>